<!--
 * @Author: your name
 * @Date: 2021-08-10 17:55:45
 * @LastEditTime: 2021-08-11 17:14:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dhjk-admin\src\components\HelloWorld.vue
-->
<template>
  <div class="container">
    <header class="header">
      <p class="radial">动环机房监控</p>
    </header>
    <main class="box" v-for="(item, index) in list" :key="index">
      <div v-if="item.child" @click="showC(item.child)">
        <div class="img" :class="item.status === '1' ? 'active' :''">
          <p class="text">{{ item.city }}</p>
        </div>
        <p>{{ item.city }}</p>
      </div>
      <div v-else-if="item.city==='吐鲁番'" @click="jumpTuLuFan">
        <div  class="img" :class="item.status === '1' ? 'active' :''">
          <p class="text">{{ item.city }}</p>
        </div>
        <p>{{ item.city }}</p>
      </div>
      <a v-else :href="item.url" target="_blank" style="text-decoration: none">
        <div  class="img" :class="item.status === '1' ? 'active' :''">
          <p class="text">{{ item.city }}</p>
        </div>
        <p>{{ item.city }}</p>
      </a>

      <!--      <p>账号：{{ item.userName }}</p>-->
      <!--      <p>密码：{{ item.password }}</p>-->
    </main>
    <div class="alert-box" v-if="dilogShow">
      <div class="alert-content flex-row-start">
        <img src="@/assets/close.png" class='closebtn' @click="closeBtn">
        <main class="box" v-for="(item, index) in child" :key="index">
          <a :href="item.url" target="_blank" style="text-decoration: none">
            <div class="img" :class="item.status === '1' ? 'active' :''">
              <p class="text">{{ item.city }}</p>
            </div>
            <p>{{ item.city }}</p>
          </a>
        </main>

      </div>
    </div>

  </div>
</template>

<script>
import hex_md5 from '../assets/md5'
import axios from 'axios'

export default {
  name: "DhjkAdminHelloworld",
  data() {
    return {
      BaseWebApiUrl: '',
      hetianPW: '',
      dilogShow: false,
      list: [
        {
          city: "省公司",
          url: "http://10.219.102.119/siteweb/Pages/Common/Login.aspx",
          userName: 'xinxizhongxin',
          password: 'xinxizhongxin',
          status: '1'
        },
        {
          city: "乌鲁木齐",
          url: "http://192.168.4.122",
          userName: '',
          password: '',
          child: [
            {
              city: "乌鲁木齐",
              url: "https://192.168.4.122:13389",
              userName: 'root',
              password: 'wjdh@2020',
            },
            {
              city: "仓房沟供电所",
              url: "https://11.83.246.19",
              userName: '',
              password: '',
            },
            {
              city: "城区第三供电中心",
              url: "https://11.83.246.42",
              userName: '',
              password: '',
            },
            {
              city: "米东供电公司",
              url: "https://11.83.245.221",
              userName: '',
              password: '',
            },
            {
              city: "乌鲁木齐县供电公司",
              url: "https://11.83.245.152",
              userName: '',
              password: '',
            },
            {
              city: "五家渠供电公司",
              url: "https://11.83.245.253",
              userName: '',
              password: '',
            },
            {
              city: "西郊供电公司",
              url: "https://11.83.245.179",
              userName: '',
              password: '',
            },
            {
              city: "城区第一供电中心",
              url: "https://11.83.246.83",
              userName: '',
              password: '',
            },
            {
              city: "城区第二供电中心",
              url: "https://11.83.246.3",
              userName: '',
              password: '',
            },
          ]
        },
        {
          city: "昌吉",
          url: "http://22.22.22.60",
        },
        {
          city: "吐鲁番",
          // url: "http://10.218.186.72/ads.web/pages/login.html",
          url: "http://10.218.186.72/ads.web/pages/login.html?strUserName=administrator&strPassword=flfser@186",
          // userName: 'administrator',
          // password: 'tlfser@186',
          // status: '1'
          strUserName: 'administrator',
          strPassword: 'tlfser@186',
          clientType: '1'
        },
        {
          city: "奎屯",
          url: "http://10.218.190.5:13389",
        },
        {
          city: "哈密",
          url: "http://10.218.67.195:13389",
        },
        {
          city: "博尔塔拉",
          url: "http://10.218.144.10",
        },
        {
          city: "伊犁",
          url: "http://10.219.234.246:3389",
        },
        {
          city: "塔城",
          url: "http://10.218.28.52",
        },
        {
          city: "阿勒泰",
          url: "http://10.218.157.139",
          status: '1'
        },
        {
          city: "巴州",
          url: "http://196.168.1.198",
        },
        {
          city: "和田",
          // url: "http://10.218.132.129/UI/login.php",
          url: "https://10.218.132.129/index.php?action=json&f=m&do=login&user=admin&passwd=7b2626883dcaf428ac514d44ccabd156&url=http://10.218.132.129/index.php",
          userName: 'admin',
          // password: 'HTdl.7186++',
          password: this.hetianPW,
          status: '1'
        },
        {
          city: "喀什",
          url: "http://10.219.148.201:13389",
        },
        {
          city: "克州",
          url: "http://10.219.150.35:18080/PEMS/",
        },
        {
          city: "电科院",
          url: "http://10.218.208.34:13389",
        },
        {
          city: "培训中心",
          url: "http://10.218.224.253",
        },
        {
          city: "检修公司",
          url: "http://10.218.4.43",
        },
        {
          city: "物资公司",
          url: "http://192.168.1.254:8080",
        },
        {
          city: "综合能源",
          url: "http://24.83.178.251",
        },
        {
          city: "新能集团",
          url: "http://192.168.1.31",
        },
      ],
      child: []
    };
  },

  mounted() {
    this.hetianPW = hex_md5('HTdl.7186++')
    let _this = this

    console.log(this.hetianPW, 'hetianpw')
  },

  methods: {
    showC(child) {
      this.dilogShow = true
      this.child = child
    },
    jumpTuLuFan(){
      axios.get("http://10.218.186.72/Ajax/SystemAjax.ashx?OperateType=GetUrl")
          .then(function (res) {
            _this.BaseWebApiUrl = res.data['WebApi']
            axios.get(_this.BaseWebApiUrl + "api/ADS_Account/GetAccountLogonInfo", {
              params: {
                strUserName: 'administrator',
                strPassword: 'tlfser@186',
                clientType: '1'
              }
            }).then(function (ress) {
              if(ress.data){
                axios.get("http://10.218.186.72/ajax/SystemAjax.ashx?OperateType=Navigation")
                    .then(function (g) {
                      let gg= JSON.parse(g.data)
                      if (gg == "1") {
                        localStorage.setItem("AndeSiteDefaultPage", "default.html");
                        window.location.href = "default.html"
                      } else {
                        if (gg == "2") {
                          localStorage.setItem("AndeSiteDefaultPage", "defaultleaflet.html");
                          window.location.href = "defaultleaflet.html"
                        } else {
                          if (gg == "3") {
                            localStorage.setItem("AndeSiteDefaultPage", "defaultmap.html");
                            window.location.href = "defaultmap.html"
                          }
                        }
                      }
                    })
              }
            })
          })
    },
    closeBtn() {
      this.dilogShow = false
    }
  },
};
</script>

<style lang='scss' scoped>
@font-face {
  font-family: "iconfont";
  src: url("../assets/xiaoniao.ttf") format("truetype");
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 70vw;
  // height: 600px;
}

.container .box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 150px;
  height: 140px;
  margin: 20px 0;
  cursor: pointer;
}

.container .box .img {
  /* 这里让图片在盒子里垂直+水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
  -18px -18px 30px rgba(255, 255, 255, 1);
  /* 过渡时间 ease-out是指先快速 后慢速 */
  transition: all 0.2s ease-out;
}

.container .box .active {
  background-color: #4ab9e7;
}

.container .box .img .text {
  font-size: 22px;
  transition: all 0.2s ease-out;
}

.container .box p {
  color: slategrey;
}

.container .box .img:hover {
  /* inset 是内部阴影 默认是外部阴影outset */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 #4ab9e7,
  inset 18px 18px 30px rgba(0, 0, 0, 0.1),
  inset -18px -18px 30px rgba(255, 255, 255, 1);
}

.container .box .active:hover {
  /* inset 是内部阴影 默认是外部阴影outset */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
  inset 18px 18px 30px rgba(0, 0, 0, 0.1),
  inset -18px -18px 30px rgba(255, 255, 255, 1);
}

.container .box .img:hover .text {
  font-size: 18px;
}

.text {
  font-family: "iconfont";
}

.header {
  width: 100vw;
  min-width: 700px;
  flex-basis: 100%;
  display: flex;
  margin-bottom: 10vh;
  // background: #000;
  p {
    margin: auto;
    font-family: "Reggae One", cursive;
    font-size: 5rem;
    color: #000;
    mask: radial-gradient(
            circle at 0 50%,
            #000,
            transparent 10%,
            transparent 0
    );
    mask-size: 100%;
    animation: scale 30s infinite;
  }

  .radial {
    mask: radial-gradient(
            circle at 50% 0,
            #000,
            transparent 20%,
            transparent 0
    );
    mask-size: 100% 100%;
    animation: scale2 5s infinite;
  }

  @keyframes scale {
    50%,
    100% {
      mask-size: 2000%;
    }
  }
  @keyframes scale2 {
    50%,
    100% {
      mask-size: 100% 2000%;
    }
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.alert-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}

.alert-content {
  width: 40vw;
  height: 400px;
  background: #fff;
  position: fixed;
  top: 25%;
  left: 50%;
  margin-left: -20vw;
  border-radius: 15px;
}

.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 150px;
  height: 140px;
  margin: 20px 0;
  cursor: pointer;
}

.closebtn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: 7px;
  cursor: pointer;
}
</style>
